<template>
    <div
        class="title-box flexs"
        :style="{
            borderRadius: `${data.rpxStyle['border-radius']}px`,
            fontWeight: data.style.weight,
            color: data.style.title_color,
            background: data.style.background,
        }"
    >
        <div class="title-text cls-flex">
            <span class="left-bottom" :style="{ background: data.style.left_bottom_color }" v-if="data.style.showLeft"></span>
            <div class="title-cont line-one">{{ data.data.title }}</div>
        </div>
        <div class="title-right cls-center">
            <span v-if="data.style.showMore">更多</span>
            <el-icon size="14px" color="#969799" v-if="data.style.arrowSwitch"><ArrowRight /></el-icon>
        </div>
    </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue"

/**
 * 标题文本
 * @property {Object} data  数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 12,
            type_name: "title",
            text: "标题文本",
            rpxStyle: {
                "margin-left": 0,
                "margin-right": 0,
                "margin-bottom": 0,
                "margin-top": 0,
                "border-radius": 5,
            },
            style: {
                arrowSwitch: false,
                showMore: false,
            },
            data: {
                /**请求地址*/
                reqUrl: "",
                /**请求参数*/
                reqData: {},
                title: "",
                /* 当没有请求地址的时候，使用data数据 */
                data: [],
            },
        },
    },
})
</script>

<style lang="less" scoped>
.title-box {
    width: 100%;
    padding: 14px;
    overflow: hidden;
    position: relative;
    .title-text {
        flex: 1;
        overflow: hidden;
        .left-bottom {
            margin-right: 8px;
            content: " ";
            width: 3px;
            height: 13px;
            display: inline-block;
            margin-top: 1px;
        }
        .title-cont{
            max-width: 260px;
        }
    }
    .title-right {
        margin-left: 20px;
        flex: none;
        span {
            color: #969799;
            font-size: 12px;
        }
    }
}
</style>
